<template>
  <el-dialog
  title="实验详情数据"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%">
  <div class="main_top">
  <p class="part-title" style="margin-top: 5px;">实验基本信息</p>
  <el-table :data="formData"  border style="width: 90%;margin-left: 40px;margin-bottom: 20px;"
      :show-header="this.header"
      :cell-style="setCellColor"
      :header-cell-style="{'background':'#eef1f6','font-weight':'500'}" >
      <el-table-column prop="name" label="实验名称" width="150px"></el-table-column>
      <el-table-column width="200px">
          <template slot="header" slot-scope="scope">
              <span>名称1</span>
          </template>
          <template slot-scope="scope">
              <span>{{scope.row.value}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="names" label="指导老师" width="150px"></el-table-column>
      <el-table-column width="200px">
          <template slot="header" slot-scope="scope">
              <span >老师1</span>
          </template>
          <template slot-scope="scope">
              <span>{{scope.row.values}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="names2" label="指导老师2" width="150px"></el-table-column>
      <el-table-column >
          <template slot="header" slot-scope="scope">
              <span >老师2</span>
          </template>
          <template slot-scope="scope">
              <span>{{scope.row.values2}}</span>
          </template>
      </el-table-column>
  </el-table>
  <p class="part-title" style="margin-top: 5px;">实验资料</p>
  <div style="margin-bottom: 20px;margin-left: 40px;">
      <a :href="this.ExperimentData.experimentData">
        <el-tag>资料下载</el-tag>
      </a>
    </div>
  <p class="part-title" style="margin-top: 5px;">实验描述</p>
  <template>
    <div style="margin-left: 40px;margin-bottom: 20px;">
      <div v-html='this.ExperimentData.experimentDesc'></div>
      <el-divider></el-divider>
    </div>
  </template>
  <p class="part-title" style="margin-top: 5px;">实验要求</p>
  <template>
    <div style="margin-left: 40px;margin-bottom: 20px;">
       <div v-html='this.ExperimentData.experimentDemand'></div>
      <el-divider></el-divider>
    </div>
  </template>
  <p class="part-title" style="margin-top: 5px;">实验报告详情</p>
<template>
    <div style="margin-left: 40px;margin-bottom: 20px;">
     <div v-html='this.ExperimentData.workFile'></div>
      <el-divider></el-divider>
    </div>
  </template>
  <p class="part-title" style="margin-top: 5px;">实验介绍</p>
  <el-card class="box-card" style="width: 100%;margin-bottom: 20px;">
    <p v-html='this.ExperimentData.fun'></p>
  </el-card>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="cancel()" v-bind:class="{ 'isShow': !isShow }" style="margin-left: 45%;">关闭窗口</el-button>
  </span>
  </div>
  </el-dialog>
</template>

<script>
  /* eslint-disable */
  export default {
      data () {
        return {
          header: false,
          formData: [],
          experimentUuid:'',
          pageIndex: 1,
          visible: false,
          ExperimentData:{
            experimentData:[],
            experimentDemand:'',
            fun:'',
            workFile:'',
            experimentDesc:''
          }
        }
      },
      mounted() {
        this.formData = []
      },
      computed: {
        id: {
          get () { return this.$store.state.user.id },
          set (val) { this.$store.commit('user/updateId', val) }
        },
        account: {
          get () { return this.$store.state.user.account },
          set (val) { this.$store.commit('user/updateAccount', val) }
        },
        avatar: {
          get () { return this.$store.state.user.avatar },
          set (val) { this.$store.commit('user/updateAvatar', val) }
        }
      },
      methods: {
        viewHandle (id){
        },
        setCellColor({row,column,rowIndex,columnIndex}){
          if(columnIndex % 2 === 0){
            return 'background-color: #f9f9f9;';
          }
        },
        getExperimentDataList(){
          this.$http({
            url: this.$http.adornUrl('/course/queryExperimentDetailByUuId'),
            method: 'get',
            params: this.$http.adornParams({
              'uuid': this.experimentUuid
            })
          }).then(({data}) => {
            if (data.success) {
              if(data.data.experimentData.length !== 0){
                data.data.experimentDemand =data.data.experimentDemand.replaceAll('\t','')
                data.data.experimentDemand =data.data.experimentDemand.replaceAll('\n','')
                data.data.experimentDemand =data.data.experimentDemand.replaceAll('；',' ;<br/>')
                this.ExperimentData.experimentData = data.data.experimentData
              }
              data.data.experimentDemand =data.data.experimentDemand.replaceAll('\t','')
              data.data.experimentDemand =data.data.experimentDemand.replaceAll('\n','')
              data.data.experimentDemand =data.data.experimentDemand.replaceAll('；',' ;<br/>')
              this.ExperimentData.experimentDemand = data.data.experimentDemand
              this.ExperimentData.fun = data.data.fun
              data.data.workFile =data.data.workFile.replaceAll('\t','')
              data.data.workFile =data.data.workFile.replaceAll('\n','')
              data.data.workFile =data.data.workFile.replaceAll('；',' ;<br/>')
              this.ExperimentData.workFile = data.data.workFile
              data.data.experimentDesc =data.data.experimentDesc.replaceAll('\t','')
              data.data.experimentDesc =data.data.experimentDesc.replaceAll('\n','')
              data.data.experimentDesc =data.data.experimentDesc.replaceAll('；',' ;<br/>')
              this.ExperimentData.experimentDesc = data.data.experimentDesc
            } else {
              this.$message.error(data.message)
            }
          })
        },
        init (experimentUuid) {
          this.visible = true
          this.experimentUuid = experimentUuid || 0
          this.getExperimentDataList()
          this.$http({
            url: this.$http.adornUrl('/course/queryExperimentAllByUuId'),
            method: 'get',
            params: this.$http.adornParams({
              'uuid': this.experimentUuid
            })
          }).then(({data}) => {
            if (data.success) {
             this.formData = []
             this.getValue(data.data)
            } else {
              this.$message.error(data.message)
            }
          })
        },
        cancel(){
          this.visible = false
        },
        getValue(data){
          this.formData = []
          for(var i = 0;i<data.length;i+=6){
            this.formData.push({
             name: data[i],
             value:data[i+1],  //注意值为value
             names: data[i+2],
             values:data[i+3],
             names2: data[i+4],
             values2:data[i+5],
            })
          }

        }
      }
    }
</script>

<style scoped>
  .part-title {
      margin: 20px 0;
      color: #000;
      padding-left: 1em;
      font-size: 16px;
      position: relative;
      display: inline-block;
      width: 100%;
  }
  .part-title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 1em;
    background-color: #4976e8;
  }
 .text {
    font-size: 14px;
  }
  .item {
    padding: 9px 0;
  }
  .box-card {
    width: 480px;
  }
</style>
